<script setup lang="ts">
import {Check,Delete,Edit,Message,Search,Star} from '@element-plus/icons-vue'
import {ref} from 'vue'
import axios from 'axios'
var arr=ref([])
var Myinput = ref<string>("请输入商品")
axios
.get('http://localhost:8080/good')
.then(res=>{
    arr.value = res.data.data.records
})
.catch(error=>{
    console.log(error)
})
console.log(Myinput.value)
</script>

<template>
    <div style="width: 1000px;">
        <h1>商品展示</h1>
        <b>搜索商品:</b>
        <input type="text" v-model="Myinput"/>
        <br></br>
        <b>你输入的信息：{{ Myinput }}</b>
        <p>商品名称</p>
        <button >Toggle</button>
        <div>
            <p>默认按钮</p>
            <div class="button-example">
                 <div class="button-row">
                    <el-button>Default</el-button>
                    <el-button type="primary">Primary</el-button>
                    <el-button type="success">Success</el-button>
                    <el-button type="info">Info</el-button>
                    <el-button type="warning">Warning</el-button>
                    <el-button type="danger">Danger</el-button>
                </div>
            </div>
        </div>
        <h1>Oh no</h1>
        <div>
            <div class="shop-box" v-for="item in arr">
                <p>{{item.name}}</p>
                <b>{{ item.name }}</b>
                <p style="width: 100%; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.description }}</p>
                <b style="color: red;">{{ item.saleMoney }}</b>
                <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" style="width: 100%;height: 100%;"></img>
            </div>

            <!-- <div class="shop-box">
                <p>商品名</p>
                <b>商品</b>
                <p>商品介绍</p>
                <b style="color: red;">商品价格</b>
                <img></img>
            </div>

            <div class="shop-box">
                <p>商品名</p>
                <b>商品</b>
                <p>商品介绍</p>
                <b style="color: red;">商品价格</b>
                <img></img>
            </div>

            <div class="shop-box">
                <p>商品名</p>
                <b>商品</b>
                <p>商品介绍</p>
                <b style="color: red;">商品价格</b>
                <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" style="width: 100%;height: 100%;"></img>
            </div> -->
        </div>
    </div>
</template>

<style scoped>

.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row > * {
  margin: 0;
}

.shop-box{
    float: left;
    width: 200px;
    /* height: 100px; */
    margin-left: 20px;
    /* margin-top: 100px; */
}
</style>
